<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    

    <title>AngularJs &amp; JQuery 结合使用存在的问题 之 input hidden 问题解决方案 | 钱猛的个人博客</title>
    <meta name="author" content="钱猛">
    
    <meta name="description" content="钱猛的个人博客。全栈发展向。无所谓做什么，只要是当前最感兴趣的事！随心、随性、随缘！">
    
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta property="og:title" content="AngularJs &amp; JQuery 结合使用存在的问题 之 input hidden 问题解决方案"/>
    <meta property="og:site_name" content="钱猛 &amp; 博客"/>

    
    <meta property="og:image" content="undefined"/>
    

    <link rel="icon" type="image/png" href="/qianmeng/favicon.png">
    <link rel="alternate" href="/qianmeng/atom.xml" title="钱猛 &amp; 博客" type="application/atom+xml">
    <link rel="stylesheet" href="/qianmeng/css/lib/materialize.min.css">
    <link rel="stylesheet" href="/qianmeng/css/lib/font-awesome.min.css">
    <link rel="stylesheet" href="/qianmeng/css/style.css" media="screen" type="text/css">

    
        <link rel="stylesheet" href="/qianmeng/css/lib/prettify-tomorrow-night-eighties.css" type="text/css">
    
    <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?fc7f849e9fbb3ea12b2683af4ccaa000";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</head>


<body>
    <img src="/weixin_favicon.png" style="position: absolute; left: -9999px; opacity: 0; filter: alpha(opacity=0);">

    <nav class="indigo">
    <div class="nav-wrapper">
        <a href="#" data-activates="main-menu" class="button-collapse">
            <i class="fa fa-navicon"></i>
        </a>
        <div class="">
            <a href="/" class="brand-logo hide-on-med-and-down">钱猛 &amp; 博客 | 
			<span style="color:#E91E63;font-size:18px;">
			<i class="fa fa-flag"></i><span id="busuanzi_value_site_pv"></span>. 
			<i class="fa fa-user"></i><span id="busuanzi_value_site_uv"></span>
			</span> 
			</a> 
            <ul class="right hide-on-med-and-down">
                
                    <li>
                        <a class="menu-home " href="/qianmeng" >
                            <i class="fa fa-home "></i>
                            
                            首页
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-archive " href="/qianmeng/archives" >
                            <i class="fa fa-archive "></i>
                            
                            归档
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                            <i class="fa fa-bookmark "></i>
                            
                            分类
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-tag " href="/qianmeng/tags" >
                            <i class="fa fa-tag "></i>
                            
                            标签
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-reading " href="/qianmeng/reading" >
                            <i class="fa fa-book "></i>
                            
                            读书
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-about " href="/qianmeng/about" >
                            <i class="fa fa-user "></i>
                            
                            关于
                        </a>
                    </li>
                
                    <li>
                        <a class="menu-search modal-trigger " href="#search" >
                            <i class="fa fa-search "></i>
                            
                            搜索
                        </a>
                    </li>
                
            </ul>
            <div>
    <ul class="side-nav indigo darken-1" id="main-menu">
        
        <li class="side-user">
            <div class="row">
                <div class="col s4 no-padding">
                    <img class="avatar-image circle responsive-img" src="https://raw.githubusercontent.com/qianmeng/resources/master/head.jpg" alt="User Avatar">
                </div>
                <div class="info col s8 valign-wrapper no-padding">
                    <div class="valign">
                        <p class="name">钱猛</p>
                        <p class="desc">全栈工程师</p>
                    </div>
                </div>
            </div>
        </li>
        

        
            <li class="no-padding">
                <a class="waves-effect menu-home " href="/qianmeng" >
                    <i class="fa fa-home "></i>
                    
                    首页
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-archive " href="/qianmeng/archives" >
                    <i class="fa fa-archive "></i>
                    
                    归档
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-category category-menu" href="javascript:;" data-activates="category-menu" >
                    <i class="fa fa-bookmark "></i>
                    
                    分类
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-tag " href="/qianmeng/tags" >
                    <i class="fa fa-tag "></i>
                    
                    标签
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-reading " href="/qianmeng/reading" >
                    <i class="fa fa-book "></i>
                    
                    读书
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-about " href="/qianmeng/about" >
                    <i class="fa fa-user "></i>
                    
                    关于
                </a>
            </li>
        
            <li class="no-padding">
                <a class="waves-effect menu-search modal-trigger " href="#search" >
                    <i class="fa fa-search "></i>
                    
                    搜索
                </a>
            </li>
        
    </ul>

    <ul class="side-nav indigo darken-1" id="category-menu">
    

            

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/总结/">
                    总结 <span class="right">9 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/总结/个人总结/">
                    个人总结 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/总结/会展总结/">
                    会展总结 <span class="right">3 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/总结/个人技能/">
                    个人技能 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/总结/公司管理/">
                    公司管理 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/总结/编程经验/">
                    编程经验 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/面试/">
                    面试 <span class="right">6 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/面试/Android/">
                    Android <span class="right">3 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/面试/Python/">
                    Python <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/面试/web/">
                    web <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/面试/前端/">
                    前端 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/前端/">
                    前端 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/前端/AngularJs/">
                    AngularJs <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/后台/">
                    后台 <span class="right">5 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/后台/Apache-CXF/">
                    Apache-CXF <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/后台/Apache-Http-Server/">
                    Apache-Http-Server <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/后台/Ehcache/">
                    Ehcache <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/后台/Hibernate/">
                    Hibernate <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/后台/MetaQ/">
                    MetaQ <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/架构/">
                    架构 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/架构/Hexo/">
                    Hexo <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/量化交易/">
                    量化交易 <span class="right">5 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/量化交易/Matlab/">
                    Matlab <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/量化交易/股票/">
                    股票 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/量化交易/爬虫/">
                    爬虫 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/量化交易/期货/">
                    期货 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/数据库/">
                    数据库 <span class="right">5 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/数据库/PostGreSQL/">
                    PostGreSQL <span class="right">5 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/Android/">
                    Android <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/Android/Vollery/">
                    Vollery <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/IOS/">
                    IOS <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/IOS/itms-services/">
                    itms-services <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/网络/">
                    网络 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/网络/互联网协议/">
                    互联网协议 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/工具分享/">
                    工具分享 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/工具分享/系统工具/">
                    系统工具 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/微信/">
                    微信 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/微信/帐号区别/">
                    帐号区别 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/星座/">
                    星座 <span class="right">2 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/星座/归类/">
                    归类 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/星座/性格/">
                    性格 <span class="right">1 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-0" collapse-level="0">
                <a class="no-padding" href="/qianmeng/categories/美女/">
                    美女 <span class="right">17 篇</span></a>
                </a>
            </li>

        

            <li class="collapse-level-1" collapse-level="1">
                <a class="no-padding" href="/qianmeng/categories/美女/素人/">
                    素人 <span class="right">17 篇</span></a>
                </a>
            </li>

        

    </ul>
</div>

        </div>
    </div>
</nav>

<div id="search" class="modal search-modal">
    <div class="row">
        <div class="input-field col s12">
              <input id="search-input" type="text">
              <label for="search-input">搜索</label>
        </div>

    </div>
    <div id="search-result" class="search-result col s12">

    </div>
</div>


    <main>
        <div class="container main-container">
    
<nav class="page-nav hide-on-small-only">
    <div class="nav-wrapper indigo">
        <span class="breadcrumb">当前位置（分类目录）</span>
        
            
    
    
    <a class="breadcrumb" href="/qianmeng/categories/前端/">前端</a><a class="breadcrumb" href="/qianmeng/categories/前端/AngularJs/">AngularJs</a>


        

        
    </div>
</nav>

<article>
    <div class="card">
        <div class="card-content">
            

            <div class="article-title">
                
    
        <h1>AngularJs &amp; JQuery 结合使用存在的问题 之 input hidden 问题解决方案</h1>
    


            </div>
            <i class="fa fa-pencil-square"></i><time class="pink-link-context" datetime="2016-05-01T10:06:50.000Z"><a href="/qianmeng/2016/05/01/AngularJs+JQuery 结合使用存在的问题 之 input hidden 问题解决方案/">2016-05-01</a></time>

			<i class="fa fa-flag"></i><span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span> 人点击
            
    <div class="tags-row">
        
            <a href="/qianmeng/tags/AngularJs/" class="chip pink lighten-1">AngularJs</a>
        
            <a href="/qianmeng/tags/JavaScript/" class="chip pink lighten-1">JavaScript</a>
        
            <a href="/qianmeng/tags/JQuery/" class="chip pink lighten-1">JQuery</a>
        
    </div>


            <div class="toc pink-link-context hide-on-med-and-down">
    <ol class="section table-of-contents"><li class="section table-of-contents-item section table-of-contents-level-4"><a class="section table-of-contents-link" href="#首先现在要解决的主要问题"><span class="section table-of-contents-text">首先现在要解决的主要问题</span></a></li><li class="section table-of-contents-item section table-of-contents-level-4"><a class="section table-of-contents-link" href="#解决过程"><span class="section table-of-contents-text">解决过程</span></a></li><li class="section table-of-contents-item section table-of-contents-level-4"><a class="section table-of-contents-link" href="#结论"><span class="section table-of-contents-text">结论</span></a></li></ol>
</div>


            <div class="entry pink-link-context">
                <p>&#x597D;&#x957F;&#x65F6;&#x95F4;&#x6CA1;&#x5199;&#x8FC7;&#x535A;&#x5BA2;&#x5566;&#xFF0C;&#x5BF9;&#x4E0D;&#x8D77;CSDN&#x7ED9;&#x7684;&#x2018;&#x6052;&#x2019;&#x6807;&#x7B7E;&#x5566;&#xFF0C;&#x563F;&#x563F;</p>
<p>&#x73B0;&#x5728;&#x9879;&#x76EE;&#x524D;&#x7AEF;&#x6846;&#x67B6;&#x5728;&#x5411;Angularjs&#x8F6C;&#x53D8;&#xFF0C;&#x4F46;&#x91CC;&#x9762;&#x8FD8;&#x662F;&#x5728;&#x7EE7;&#x7EED;&#x4F7F;&#x7528;JQuery&#xFF0C;&#x5F53;&#x7136;&#x8FD9;&#x6837;&#x662F;&#x80AF;&#x5B9A;&#x4E0D;&#x5408;&#x7406;&#x7684;&#xFF0C;&#x641C;&#x4E86;&#x4E0B;&#x76F8;&#x5173;&#x8BF4;&#x6CD5;&#xFF0C;AngualrJs &#x662F;&#x4E0D;&#x5EFA;&#x8BAE;&#x548C;JQuery&#x7ED3;&#x5408;&#x4F7F;&#x7528;&#x7684;&#xFF08;&#x867D;&#x7136;Angularjs&#x81EA;&#x5E26;JQLite&#xFF09;&#xFF0C;&#x4F46;&#x9879;&#x76EE;&#x539F;&#x56E0;&#xFF0C;&#x6682;&#x65F6;&#x5C31;&#x662F;&#x8FD9;&#x4FE9;&#x4E1C;&#x897F;&#x7ED3;&#x5408;&#x4F7F;&#x7528;&#xFF0C;&#x5177;&#x4F53;&#x539F;&#x56E0;&#x4E0D;&#x8BA8;&#x8BBA;&#xFF0C;&#x53EA;&#x8BA8;&#x8BBA;&#x7ED3;&#x5408;&#x5B58;&#x5728;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x6211;&#x76F8;&#x4FE1;&#x4E0D;&#x53EA;&#x6211;&#x4EEC;&#x9879;&#x76EE;&#x9047;&#x5230;&#x8FD9;&#x79CD;&#x60C5;&#x51B5;.<br><a id="more"></a></p>
<h4 id="&#x9996;&#x5148;&#x73B0;&#x5728;&#x8981;&#x89E3;&#x51B3;&#x7684;&#x4E3B;&#x8981;&#x95EE;&#x9898;"><a href="#&#x9996;&#x5148;&#x73B0;&#x5728;&#x8981;&#x89E3;&#x51B3;&#x7684;&#x4E3B;&#x8981;&#x95EE;&#x9898;" class="headerlink" title="&#x9996;&#x5148;&#x73B0;&#x5728;&#x8981;&#x89E3;&#x51B3;&#x7684;&#x4E3B;&#x8981;&#x95EE;&#x9898;"></a>&#x9996;&#x5148;&#x73B0;&#x5728;&#x8981;&#x89E3;&#x51B3;&#x7684;&#x4E3B;&#x8981;&#x95EE;&#x9898;</h4><blockquote>
<p>&#x4F7F;&#x7528;JQuery&#x7684;&#x8D4B;&#x503C;&#x65B9;&#x6CD5;&#x5BF9;ng-model &#x6240;&#x5728;input&#x8D4B;&#x503C;&#x662F;&#x4E0D;&#x8D77;&#x4F5C;&#x7528;&#x7684;</p>
</blockquote>
<h4 id="&#x89E3;&#x51B3;&#x8FC7;&#x7A0B;"><a href="#&#x89E3;&#x51B3;&#x8FC7;&#x7A0B;" class="headerlink" title="&#x89E3;&#x51B3;&#x8FC7;&#x7A0B;"></a>&#x89E3;&#x51B3;&#x8FC7;&#x7A0B;</h4><p>&#x4E4B;&#x524D;&#x4E5F;&#x641C;&#x8FC7;&#x7C7B;&#x4F3C;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x7ED3;&#x679C;&#x5927;&#x90FD;&#x662F;&#x4F7F;&#x7528; ng-value &#xFF0C;ng-init &#x7B49;&#x7B49;&#xFF0C;&#x4F46;&#x8FD9;&#x4E9B;&#x90FD;&#x662F;&#x53EA;&#x662F;&#x9488;&#x5BF9;&#x9759;&#x6001;&#x503C;&#x5904;&#x7406;&#xFF0C;&#x4E00;&#x65E6;&#x6211;&#x9700;&#x8981;&#x4F7F;&#x7528;JQuery&#x5BF9;ng-model&#x6240;&#x5728;&#x7684;input&#x8FDB;&#x884C;&#x8D4B;&#x503C;&#xFF0C;ng-model&#x7167;&#x6837;&#x4E0D;&#x4F1A;&#x53D8;&#x5316;&#xFF0C;&#x540E;&#x6765;&#x89E3;&#x51B3;Angularjs&#x7ED3;&#x5408;&#x65E5;&#x671F;&#x63A7;&#x4EF6;LayDate&#x7684;&#x5904;&#x7406;&#x65B9;&#x6CD5;&#x65F6;&#x6CE8;&#x610F;&#x5230;&#x4E86;&#x6307;&#x4EE4;&#x8FD9;&#x4E2A;&#x4E1C;&#x897F;&#xFF0C;&#x987A;&#x5E26;&#x7740;&#x53C8;&#x770B;&#x5230;&#x4E86;N&#x591A;&#x6307;&#x4EE4;&#x89E3;&#x51B3;JQuery&#x63D2;&#x4EF6;&#x548C;Angularjs&#x7ED3;&#x5408;&#x4F7F;&#x7528;&#x7684;&#x4F8B;&#x5B50;&#xFF0C;&#x540E;&#x6765;&#x624D;&#x53D1;&#x73B0;&#x6307;&#x4EE4;&#x7684;&#x5411;ng-model&#x3001;ng-value&#x8FD9;&#x90FD;&#x5C5E;&#x4E8E;&#x57FA;&#x672C;&#x6307;&#x4EE4;&#xFF0C;&#x5176;&#x4ED6;&#x7684;&#x6307;&#x4EE4;&#x53EA;&#x662F;&#x81EA;&#x5B9A;&#x4E49;&#x7F62;&#x4E86;&#xFF0C;&#x5B66;&#x4E60;&#x4E0D;&#x6DF1;&#x5165;&#x771F;&#x53EF;&#x6015;<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">```</span><br><span class="line">.directive(&apos;ngUpdateHidden&apos;,function() {</span><br><span class="line">    return function(scope, el, attr) {</span><br><span class="line">        var model = attr[&apos;ngModel&apos;];</span><br><span class="line">        scope.$watch(model, function(nv) {</span><br><span class="line">            el.val(nv);</span><br><span class="line">        });</span><br><span class="line"></span><br><span class="line">    };}</span><br><span class="line">```</span><br><span class="line"></span><br><span class="line">&#x4E0D;&#x96BE;&#x770B;&#x51FA;&#xFF0C;&#x8FD9;&#x662F;&#x53E6;&#x4E00;&#x7AEF;&#xFF0C;&#x662F;Angularjs&#x4E2D;model&#x6539;&#x53D8;&#x65F6;&#xFF0C;&#x52A8;&#x6001;&#x6539;&#x53D8;hidden&#x4E2D;&#x7684;&#x503C;&#xFF0C;&#x6B63;&#x597D;&#x76F8;&#x53CD;&#xFF0C;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x5C31;&#x662F;&#x5229;&#x7528;$watch&#x76D1;&#x542C;model&#x503C;&#x7684;&#x53D8;&#x5316;&#x3002;&#x867D;&#x7136;&#x4E0D;&#x662F;&#x6211;&#x60F3;&#x8981;&#x7684;&#x7ED3;&#x679C;&#xFF0C;&#x4F46;&#x60F3;&#x4E00;&#x4E0B;&#xFF0C;&#x65E2;&#x7136;&#x53EF;&#x4EE5;&#x76D1;&#x542C;model&#x7684;&#x503C;&#xFF0C;&#x7136;&#x540E;&#x6539;&#x53D8;hidden&#x7684;&#x503C;&#xFF0C;&#x90A3;&#x6211;&#x5C31;&#x5B9E;&#x73B0;&#x76D1;&#x542C;hidden&#x7684;&#x503C;&#xFF0C;&#x7136;&#x540E;&#x53BB; &#x6539;&#x53D8;model&#x5C31;&#x662F;&#x54AF;&#xFF0C;&#x76D1;&#x542C;dom&#x5143;&#x7D20;&#x6539;&#x53D8;&#x7684;&#x65B9;&#x6CD5;&#x90FD;&#x662F;&#x73B0;&#x6210;&#x7684;onchange()&#x561B;&#xFF0C;&#x521A;&#x60F3;&#x5199;&#xFF0C;&#x53C8;&#x641C;&#x5230;&#x7684;&#x76F8;&#x5173;&#x4EE3;&#x7801;</span><br><span class="line"></span><br><span class="line">```</span><br><span class="line">.directive(&apos;ngUpdateHidden&apos;, function () {</span><br><span class="line">    return {</span><br><span class="line">        restrict: &apos;AE&apos;, //attribute or element</span><br><span class="line">        scope: {},</span><br><span class="line">        replace: true,</span><br><span class="line">        require: &apos;ngModel&apos;,</span><br><span class="line">        link: function ($scope, elem, attr, ngModel) {</span><br><span class="line">            $scope.$watch(ngModel, function (nv) {</span><br><span class="line">                elem.val(nv);</span><br><span class="line">            });</span><br><span class="line">            elem.change(function () { //bind the change event to hidden input</span><br><span class="line">                $scope.$apply(function () {</span><br><span class="line">                    ngModel.$setViewValue(  elem.val());</span><br><span class="line">                });</span><br><span class="line">            });</span><br><span class="line">        }</span><br><span class="line">    };</span><br><span class="line">})</span><br><span class="line">```</span><br><span class="line"></span><br><span class="line">&#x4EE5;&#x4E0A;&#x5C31;&#x662F;&#x6211;&#x8BF4;&#x7684;&#x5B8C;&#x7F8E;&#x5B9E;&#x73B0;</span><br><span class="line"></span><br><span class="line">&#x4E8E;&#x662F;&#x5F88;&#x5F00;&#x5FC3;&#xFF0C;&#x8D76;&#x7D27;&#x53BB;&#x5C1D;&#x8BD5;&#x5148;:</span><br><span class="line"></span><br><span class="line">```</span><br><span class="line">&lt; input type=&quot;hidden&quot; id=&quot;userName&quot; ng-model=&quot;userName&quot; ng-update-hidden /&gt;</span><br><span class="line">```</span><br><span class="line"></span><br><span class="line">&#x7136;&#x540E;&#x52A8;&#x6001;&#x8D4B;&#x503C;:</span><br><span class="line"></span><br><span class="line">```</span><br><span class="line">$(&quot;#userName&quot;).val(&quot;qianmeng&quot;); </span><br><span class="line">```</span><br><span class="line"></span><br><span class="line">&#x7ED3;&#x679C;&#x4E00;&#x8138;&#x61F5;&#x903C;</span><br><span class="line"></span><br><span class="line">&gt; &#x53D1;&#x73B0;val()&#x65B9;&#x6CD5;&#x8D4B;&#x503C;&#xFF0C;&#x6839;&#x672C;&#x4E0D;&#x4F1A;&#x89E6;&#x53D1;onchange()&#x4E8B;&#x4EF6;</span><br><span class="line"></span><br><span class="line">&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#x6211;&#x53EA;&#x8981;&#x8D4B;&#x503C;&#x7684;&#x65F6;&#x5019;&#x8BA9;&#x5B83;&#x89E6;&#x53D1;change&#x4E8B;&#x4EF6;&#x5C31;&#x7ED3;&#x675F;&#x5566;&#xFF1A;</span><br><span class="line"></span><br><span class="line">```</span><br><span class="line">$(&quot;#userName&quot;).val(&quot;qianmeng&quot;).trigger(&quot;change&quot;);</span><br><span class="line">```</span><br><span class="line"></span><br><span class="line">&#x6210;&#x529F;&#x4E86;</span><br></pre></td></tr></table></figure></p>
<p>&#x4F46;&#x611F;&#x89C9;&#x8FD9;&#x6837;&#x5E76;&#x4E0D;&#x901A;&#x7528;&#xFF0C;&#x5982;&#x679C;&#x80FD;&#x76F4;&#x63A5;val&#xFF08;&#x201D;&#x201D;&#xFF09;&#x4E0D;&#x8981;&#x5904;&#x7406;&#x989D;&#x5916;&#x7684;&#x4E1C;&#x897F;&#xFF0C;&#x5C82;&#x4E0D;&#x662F;&#x66F4;&#x597D;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#x53EA;&#x8981;&#x5C01;&#x88C5;&#x4E0B;JQuery&#x8D4B;&#x503C;&#x7684;&#x65F6;&#x5019;&#x81EA;&#x52A8;&#x8C03;&#x7528;&#x4E0B;change&#x4E8B;&#x4EF6;&#x5C31;&#x53EF;&#x4EE5;&#x4E86;</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">(function($) {</span><br><span class="line">     $.fn.update = function(value){</span><br><span class="line">        $(this).each(function(){</span><br><span class="line">            if(value!=this.value){</span><br><span class="line">                this.value = value;</span><br><span class="line">                this.onchange();</span><br><span class="line">            }</span><br><span class="line">        });</span><br><span class="line">     };</span><br><span class="line">})(jQuery);</span><br></pre></td></tr></table></figure>
<p>&#x7136;&#x540E;&#x4F7F;&#x7528;</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;#userName&quot;).update(&quot;qianmeng&quot;);</span><br></pre></td></tr></table></figure>
<p>&#x8FD9;&#x8FB9;&#x53EA;&#x8981;&#x4F7F;&#x7528;&#x5C01;&#x88C5;&#x540E;&#x7684;update&#x65B9;&#x6CD5;&#x5C31;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x4E86;</p>
<p>&#x603B;&#x7ED3;&#xFF0C;&#x9996;&#x5148;&#x8981;&#x5199;&#x4E2A;&#x6307;&#x4EE4;&#xFF0C;&#x5728;&#x6570;&#x636E;&#x53D8;&#x5316;&#x65F6;&#x7ED9;ng-model&#x8D4B;&#x503C;&#xFF0C;&#x7136;&#x540E;&#x4FE9;&#x79CD;&#x8C03;&#x7528;&#x65B9;&#x5F0F;</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1&#x3001;$(&quot;#userName&quot;).val(&quot;qianmeng&quot;).trigger(&quot;change&quot;);</span><br><span class="line">2&#x3001;$(&quot;#userName&quot;).update(&quot;qianmeng&quot;);</span><br></pre></td></tr></table></figure>
<h4 id="&#x7ED3;&#x8BBA;"><a href="#&#x7ED3;&#x8BBA;" class="headerlink" title="&#x7ED3;&#x8BBA;"></a>&#x7ED3;&#x8BBA;</h4><p>&#x60F3;&#x4E86;&#x4E0B;&#xFF0C;&#x65E2;&#x7136;&#x4FE9;&#x79CD;&#x65B9;&#x6CD5;&#x90FD;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x9884;&#x671F;&#x6548;&#x679C;&#xFF0C;&#x4F46;&#x6BD5;&#x7ADF;update&#x51FD;&#x6570;&#x662F;&#x81EA;&#x5DF1;&#x5C01;&#x88C5;&#x7684;&#xFF0C;&#x5E76;&#x4E0D;&#x901A;&#x7528;&#xFF0C;&#x6240;&#x4EE5;&#x8FD8;&#x662F;&#x6709;&#x70B9;&#x503E;&#x5411;&#x7B2C;&#x4E00;&#x79CD;&#x65B9;&#x6CD5;</p>

            </div>
        </div>
    </div>
</article>  
<div class="card"> 
	 <nav id="pagination" class="indigo" >
		
		<a style="float: left;" href="/qianmeng/2016/05/10/Android 面试要点/" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-left"></i>&nbsp;&nbsp;上一页</a>
		
		
		<a style="float: right;" href="/qianmeng/2015/09/17/AngularJs 表单提交数据不能以key-value 形式传到后台的解决方案/" >&nbsp;&nbsp;&nbsp;&nbsp;下一页&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>&nbsp;&nbsp;&nbsp;&nbsp;</a>
		
		<div class="clearfix"></div>
	</nav> 
</div>





    <section id="comment">
        <div class="card">
            <div class="card-content">
                <!-- Duoshuo Comment BEGIN -->
                <div class="ds-thread" data-thread-key="2016/05/01/AngularJs+JQuery 结合使用存在的问题 之 input hidden 问题解决方案/" data-title="AngularJs &amp; JQuery 结合使用存在的问题 之 input hidden 问题解决方案" data-url="https://kidmid.gitee.io/qianmeng/qianmeng/2016/05/01/AngularJs+JQuery 结合使用存在的问题 之 input hidden 问题解决方案/"></div>

                <script type="text/javascript">
                    console.log(document.querySelector('.ds-thread'));
                    var duoshuoQuery = {
                        short_name: 'kidmid'
                    };
                    (function() {
                        var ds = document.createElement('script');
                        ds.type = 'text/javascript';
                        ds.async = true;
                        ds.src = (document.location.protocol == 'https:'
                            ? 'https:'
                            : 'http:') + '//static.duoshuo.com/embed.js';
                        ds.charset = 'UTF-8';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
                    })();
                </script>
                <!-- Duoshuo Comment END -->
            </div>
        </div>
    </section>



</div>

        <div class="fixed-action-btn float-sitemap">
    <a class="btn-floating btn-large pink">
      <i class="fa fa-caret-square-o-up"></i>
    </a>
    <ul>
      <li><a class="btn-return-top btn-floating waves-effect green" title="回到顶部"><i class="fa fa-arrow-circle-o-up"></i></a></li>
      <li><a class="btn-floating waves-effect button-collapse yellow darken-1"  data-activates="main-menu" title="menu"><i class="fa fa-navicon"></i></a></li>
    </ul>
  </div>

    </main>
    <footer class="page-footer indigo darken-1">
    
    <div class="container">
        <div class="row">
            
            <div class="social-group col m3 s12">
                <h5 class="white-text">社交</h5>
                
                    <a class="social-link" href="https://github.com/qianmeng" target="_blank">
                        <i class="fa fa-2x fa-github"></i>
                    </a>
                
                    <a class="social-link" href="http://weibo.com/u/1819068247" target="_blank">
                        <i class="fa fa-2x fa-weibo"></i>
                    </a>
                
                    <a class="social-link" href="/atom.xml" target="_blank">
                        <i class="fa fa-2x fa-rss"></i>
                    </a>
                
            </div>
            

            
            <div class="col m9 s12">
                <h5 class="white-text">友情链接</h5>
                
                    <a class="social-link" href="http://blog.csdn.net/qian_meng" target="_blank">CSDN 地址</a>
                
                    <a class="social-link" href="https://github.com/qianmeng" target="_blank">Github地址</a>
                
            </div>
            
        </div>
    </div>
    

    <div class="footer-copyright pink-link-context">
        <div class="container">
            © 2016  All rights reserved. 
        </div>
    </div>
</footer> 
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>


    <noscript>
    <div class="noscript">
        <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
    </div>
</noscript>
<div class="noscript">
    <p class="center-align">当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器</p>
</div>


<script src="/qianmeng/js/jquery-2.1.1.min.js"></script>
<script src="/qianmeng/js/materialize.min.js"></script>

<script>
    (function($) {
        $(document).ready(function() {
            // 隐藏禁用javascript（针对微信内置浏览器）的提示
            $('.noscript').hide();

            // 图片缩放效果
            var $imgs = $('img').not('.slider-image').not('.avatar-image').not('.carousel-image').not('.card-cover-image').not('.qrcode');

            // 给图片加上点击放大效果（materialbox插件）
            $imgs.addClass('materialboxed').each(function(i, el) {
                $(this).attr('data-caption', $(this).attr('alt') || ' ');
            }).materialbox();

            // 优化表格的显示
            $('table').each(function() {
                var $table = $(this);
                // 除去多行代码的情况
                if ($table.find('pre').length == 0) {
                    $table.addClass('responsive-table striped bordered');
                }
            });

            // 首页幻灯片
            $('.slider').slider({indicators: true, full_width: true, interval: 8000});

            $(".button-collapse").sideNav();
            $(".category-menu").sideNav();

            // 针对gallery post
            $('.carousel').carousel({full_width: true});
            $('.carousel-control.prev').click(function() {
                $('.carousel').carousel('prev');
            });
            $('.carousel-control.next').click(function() {
                $('.carousel').carousel('next');
            });

            // 文章目录
            $('article').not('.simple-article').find('h1').add('h2').add('h3').add('h4').add('h5').add('h6').scrollSpy();
            // 修正文章目录的left-border颜色
            var color = $('.table-of-contents-text').css('color');
            $('.table-of-contents-link').css('border-left-color', color);

            // 针对移动端做的优化：FAB按钮点击一下收回
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                $('.fixed-action-btn').addClass('click-to-toggle');
            }
            // 回到顶部
            $('.btn-return-top').click(function() {
                $('body, html').animate({
                    scrollTop: 0
                }, 500);
            });

            // 重置读书页面的Tab标签页的颜色
            $('li.tab a').hover(function() {
                $(this).toggleClass('text-lighten-4');
            });
            $('.indicator').addClass('pink lighten-2');

            
            // 添加new标签
            $('.menu-search').append('<span class="new badge pink"></span>');
            

            // 搜索功能
            $('.modal-trigger').leanModal();
            var searchXml = "search.xml";
            if (searchXml.length == 0) {
             	searchXml = "search.xml";
            }
            var searchPath = "/qianmeng/" + searchXml;
            initSearch(searchPath, 'search-input', 'search-result');
        });

        // 初始化搜索与匹配函数
        var initSearch = function(path, search_id, content_id) {
            'use strict';
            $.ajax({
                url: path,
                dataType: "xml",
                success: function(xmlResponse) {
                    // get the contents from search data
                    var datas = $("entry", xmlResponse).map(function() {
                        return {
                            title: $("title", this).text(),
                            content: $("content", this).text(),
                            url: $("url", this).text()
                        };
                    }).get();
                    var $input = document.getElementById(search_id);
                    var $resultContent = document.getElementById(content_id);
                    $input.addEventListener('input', function() {
                        var str = '<ul class=\"search-result-list\">';
                        var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                        $resultContent.innerHTML = "";
                        if (this.value.trim().length <= 0) {
                            return;
                        }
                        // perform local searching
                        datas.forEach(function(data) {
                            var isMatch = true;
                            var content_index = [];
                            var data_title = data.title.trim().toLowerCase();
                            var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                            var data_url = data.url;
                            var index_title = -1;
                            var index_content = -1;
                            var first_occur = -1;
                            // only match artiles with not empty titles and contents
                            if (data_title != '' && data_content != '') {
                                keywords.forEach(function(keyword, i) {
                                    index_title = data_title.indexOf(keyword);
                                    index_content = data_content.indexOf(keyword);
                                    if (index_title < 0 && index_content < 0) {
                                        isMatch = false;
                                    } else {
                                        if (index_content < 0) {
                                            index_content = 0;
                                        }
                                        if (i == 0) {
                                            first_occur = index_content;
                                        }
                                    }
                                });
                            }
                            // show search results
                            if (isMatch) {
                                keywords.forEach(function(keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    data_title = data_title.replace(regS, "<span class=\"search-keyword pink lighten-2\">" + keyword + "</span>");
                                });

                                str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                                var content = data.content.trim().replace(/<[^>]+>/g, "");
                                if (first_occur >= 0) {
                                    // cut out 100 characters
                                    var start = first_occur - 20;
                                    var end = first_occur + 80;
                                    if (start < 0) {
                                        start = 0;
                                    }
                                    if (start == 0) {
                                        end = 100;
                                    }
                                    if (end > content.length) {
                                        end = content.length;
                                    }
                                    var match_content = content.substring(start, end);
                                    // highlight all keywords
                                    keywords.forEach(function(keyword) {
                                        var regS = new RegExp(keyword, "gi");
                                        match_content = match_content.replace(regS, "<span class=\"search-keyword pink lighten-2\">" + keyword + "</span>");
                                    });

                                    str += "<p class=\"search-result\">..." + match_content + "...</p>"
                                }
                                str += "</li>";
                            }
                        });
                        str += "</ul>";
                        $resultContent.innerHTML = str;
                    });
                }
            });
        }
    })(jQuery);
</script>


<script src="/qianmeng/js/prettify.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("pre").addClass("prettyprint");
        prettyPrint();
    });
</script>




<script type="text/javascript" src="http://tajs.qq.com/stats?sId=56073371" charset="UTF-8"></script>



<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async
  src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>



	<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"6","bdPos":"right","bdTop":"145"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

</body>
</html>
